{% extends "base.html" %}
{% load add_field_css i18n %}

{% block page-title %}🔐{% trans "Password Reset" context "page title" %}{% endblock %}
{% block head-title %}{% endblock %}

{% block nav %}{% endblock %}

{% block content %}


  <div class="row">

    <div class="col-md-3"></div>
    <div class="col-md-6">
      <div class="card">

        <div class="list-group list-group-flush">
        <form id="reset" action="." method="POST">
        {% csrf_token %}

          <div class="list-group-item pb-0">
            <h4 class="card-title mb-4">
              <span class="emoji">🔐</span>{% trans "Password Reset" context "page title" %}
            </h4>
            <p class="text-info">
              {% trans "Enter your email address below, and we'll email you a password reset link." %}
            </p>
          </div>

          <div class="list-group-item pt-4 pb-4">

            {% if form.errors %}
              {% trans "Please enter a valid email address." as message %}
              {% include "components/form-errors.html" with errors=form.errors %}
            {% endif %}
            {% with field=form.email %}
              <div class="mb-3">
                <label for="{{ field.id_for_label }}">{% trans "Email address" %}</label>
                {{ field|addcss:"form-control" }}
                {{ field.errors }}
              </div>
            {% endwith %}

          </div>

          <div class="list-group-item pt-4 pb-3">

            <button type="submit" class="btn btn-block btn-success mb-3">
              {% trans "Reset my password" context "button" %}
            </button>
            <div class="text-center">
              <a href="{% url 'login' %}">{% trans "Back to the login page" %}</a>
            </div>

          </div>

        </form>
        </div>

      </div>
    </div>
    <div class="col-md-3"></div>

  </div>



{% endblock %}
